<template>
    <!-- 返回顶部之组件 -->
    <div v-show="back" class="top iconfont icon-taiji" @click="BackTop" :class="{rotate:back}"></div>
</template>

<script>
    export default {
        data() {
            return {
                back: false,
                flag: true
            };
        },
        methods: {
            BackTop() {
                window.scroll({
                    top: 0,
                    behavior: "smooth"
                })
            },
            HandleScroll() {
                if (this.flag) {
                    setTimeout(() => {
                        if (Math.ceil(document.documentElement.scrollTop) > 4000) {
                            console.log("阴阳鱼");
                            this.back = true,
                                this.flag = true
                        } else if (Math.ceil(document.documentElement.scrollTop) < 900) {
                            this.back = false,
                                this.flag = true
                        }else{
                                this.flag = true
                        }
                    }, 500);
                }
                this.flag = false
            }
        },
        mounted() {
            window.addEventListener('scroll', this.HandleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
        },
    }
</script>

<style lang="less" scoped>
    .top {
        position: fixed;
        bottom: 20px;
        right: 10%;
        bottom: 14%;
        font-size: 26px;
        z-index: 1;
    }

    .rotate {
        animation: mytai 2s linear infinite;
    }

    @keyframes mytai {
        0% {
            transform: rotate(0);
            color: #fff;
        }

        25% {
            transform: rotate(90deg);
            color: #ccc;
        }

        50% {
            transform: rotate(180deg);
            color: #000;
        }

        75% {
            transform: rotate(270deg);
            color: #ccc;
        }

        100% {
            transform: rotate(360deg);
            color: #fff
        }
    }
</style>